# Quick Start Guide

## Build and Install

1. **Install dependencies:**
   ```bash
   npm install
   ```

2. **Build the extension:**
   ```bash
   npm run build
   ```

3. **Load in Chrome:**
   - Open `chrome://extensions/`
   - Enable "Developer mode"
   - Click "Load unpacked"
   - Select the `dist` folder

## Key Features

### Popup Interface
- **Breaks Tab**: Quick access to breathing exercises and practices
- **Focus Tab**: Browse longevity content and articles
- **News Tab**: Latest longevity news from RSS feeds
- **Dynamics Tab**: Manage reminders and timers
- **Analytics Tab**: Browser history visualizations
- **Profile Tab**: Settings and preferences

### New Tab Dashboard
- Full-featured dashboard with all sections
- Content management
- Reminder configuration
- Goals and gamification
- Background noise player

### Browser History Analytics
- Time spent per domain
- Hourly activity patterns
- Most visited sites
- Weekly activity heatmap
- Comprehensive statistics

### Audio Features
- Tone.js-powered notification sounds
- Ambient background noise (rain, ocean, forest, etc.)
- Volume control

## Development

```bash
npm run dev    # Start dev server
npm run build  # Build for production
```

## Project Structure

- `src/popup/` - Popup interface React app
- `src/newtab/` - New tab dashboard React app
- `src/breathing/` - Breathing exercise page
- `src/history/` - History analytics page
- `src/components/` - Shared React components
- `src/hooks/` - Custom React hooks
- `src/utils/audio/` - Tone.js audio manager
- `data/` - Content and reminder data files
- `dist/` - Built extension files (generated)

## Technologies

- **React 18** - UI framework
- **Vite** - Build tool
- **Chart.js** - Data visualization
- **Tone.js** - Audio processing
- **Chrome Extensions API** - Extension functionality

